<template>
    <div>
        <el-row>
            <el-col :span="22" align="center">
                <div>
                    <el-card style="width:auto;margin:8px" align="center">
                        <el-collapse v-model="activeName">
                            <el-collapse-item title="请选择入住时间" name="1">
                                <div>
                                    <div class="block" style="margin:20px;float:left">
                                        <span class="demonstration" style="margin-right:20px">入住时间</span>
                                        <el-date-picker
                                            v-model="checkInTime"
                                            type="datetime"
                                            placeholder="选择日期时间"
                                            default-time="12:00:00"
                                            :picker-options="pickerOptions0"
                                        ></el-date-picker>
                                    </div>
                                    <div style="margin:20px;float:left">
                                        <span class="demonstration" style="margin-right:20px">使用天数</span>
                                        <el-input-number v-model="useDay"></el-input-number>&nbsp;&nbsp;
                                        <span style="color:#ff9955">入住时间至次日12:00为一天</span>
                                    </div>
                                    <div style="margin:10px" v-for="item in useNum" :key="item"></div>
                                </div>
                            </el-collapse-item>
                        </el-collapse>
                    </el-card>
                </div>
                <div style="margin:10px" v-for="item in 6" :key="item">
                    <el-card style="width:100%">
                        <el-row :gutter="10">
                            <img :src="roompic[item-1]" class="image" />
                            <el-button
                                style="color:#67C23A;float:left;font-size: 15px;"
                                type="text"
                                @click="roomInfo(item)"
                            >{{description[item-1]}}></el-button>
                            <div style="float:right;margin-top:13%">
                                <el-button
                                    type="primary"
                                    class="button"
                                    @click="checkorder(item)"
                                >预 定</el-button>
                            </div>
                        </el-row>
                    </el-card>
                </div>
            </el-col>
        </el-row>
        <el-dialog title="房间详情" :visible.sync="roomVisible" width="width">
            <div>
                <el-carousel
                    :interval="2000"
                    type="card"
                    height="200px"
                    width="1000px"
                    align="center"
                >
                    <el-carousel-item v-for="item in 4" :key="item">
                        <el-image :src="psrc[item-1]"></el-image>
                    </el-carousel-item>
                </el-carousel>
            </div>
            <div style="margin:8px">
                <span style="margin:10px">上网 WiFi和宽带</span>
                <el-divider direction="vertical"></el-divider>
                <span style="margin:10px">卫浴 独立</span>
                <el-divider direction="vertical"></el-divider>
            </div>
            <div style="margin:8px">
                <span style="margin:10px">窗户 有</span>
                <el-divider direction="vertical"></el-divider>
                <span style="margin:10px">可住 2人</span>
                <el-divider direction="vertical"></el-divider>
            </div>
            <div style="margin:8px">
                <span style="margin:10px">面积 45㎡</span>
                <el-divider direction="vertical"></el-divider>
            </div>
            <div style="margin:8px">
                <span style="margin:10px">床型 大床1.5×2.0米1张</span>
                <el-divider direction="vertical"></el-divider>
            </div>
            <div slot="footer">
                <el-button @click="roomVisible = false">取 消</el-button>
                <el-button type="primary" @click="checkorder(item)">预 定</el-button>
            </div>
        </el-dialog>
        <el-dialog title="请选择入住时间" :visible.sync="orderVisible1" width="width">
            <div>
                <div class="block" style="margin-bottom:20px">
                    <span class="demonstration" style="margin-right:20px">入住时间</span>
                    <el-date-picker
                        v-model="checkInTime"
                        type="datetime"
                        placeholder="选择日期时间"
                        default-time="12:00:00"
                        :picker-options="pickerOptions0"
                    ></el-date-picker>
                </div>
                <div style="margin-bottom:20px">
                    <span class="demonstration" style="margin-right:20px">使用天数</span>
                    <el-input-number v-model="useDay"></el-input-number>&nbsp;&nbsp;
                    <span style="color:#ff9955">入住时间至次日12:00为一天</span>
                </div>
                <div style="margin:10px" v-for="item in useNum" :key="item"></div>
            </div>
            <div slot="footer">
                <el-button @click="cancelorder1()">取 消</el-button>
                <el-button type="primary" @click="commit()">确定</el-button>
            </div>
        </el-dialog>
        <el-dialog title="选择房间数量" :visible.sync="orderVisible2" width="width">
            <div>
                <div style="margin-bottom:20px">
                    <span class="demonstration" style="margin-right:20px">房间数量</span>
                    <el-input-number v-model="roomNum"></el-input-number>
                </div>
                <div style="margin-bottom:20px">
                    <span class="demonstration" style="margin-right:20px">入住人数</span>
                    <el-input-number v-model="useNum"></el-input-number>&nbsp;&nbsp;
                    <span style="color:#ff9955">需携带身份证前台验证</span>
                </div>
                <div style="margin:10px" v-for="item in useNum" :key="item"></div>
            </div>
            <div slot="footer">
                <el-button @click="cancelorder2()">取 消</el-button>
                <el-button type="primary" @click="commitOrder()">确认订单</el-button>
            </div>
        </el-dialog>
        <el-dialog title="确认订单" :visible.sync="orderVisible3" width="500px">
            <div style="margin:15px">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;姓名：{{userName}}</div>
            <div style="margin:15px">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;电话：{{userTel}}</div>
            <div style="margin:15px">入住时间：{{checkTime}}</div>
            <div style="margin:15px">离开时间：{{checoutkTime}}</div>
            <div style="margin:15px">房间类型：{{roomType}}</div>
            <div style="margin:15px">房间数量：{{roomNum}}</div>
            <div style="margin:15px">入住人数：{{useNum}}</div>
            <div style="margin:15px">入住天数：{{useDay}}</div>
            <div style="margin:15px">订单编号：{{orderId}}</div>
            <div style="margin:15px">&nbsp;&nbsp;&nbsp;&nbsp;总金额：{{totalPrice}}</div>
            <div slot="footer">
                <el-button @click="cancelorder2()">取 消</el-button>
                <el-button type="primary" @click="payType()">立即付款</el-button>
            </div>
        </el-dialog>
        <el-dialog title="请选择付款方式" :visible.sync="payTypeVisible" width="width">
            <div style="margin:20px">
                <el-button class="paybutton" @click="payorder()">
                    <el-image :src="imagesrc1"></el-image>
                </el-button>
            </div>
            <div class="paybutton" style="margin:20px">
                <el-button @click="payorder()">
                    <el-image :src="imagesrc2"></el-image>
                </el-button>
            </div>
            <div class="paybutton" style="margin:20px">
                <el-button @click="payorder()">
                    <el-image :src="imagesrc3"></el-image>
                </el-button>
            </div>
            <div slot="footer">
                <el-button @click="payTypeVisible = false">取消订单</el-button>
            </div>
        </el-dialog>
        <el-dialog title="扫码付款" :visible.sync="payVisible" width="450px">
            <div align="center" style="height:400px;width:400px">
                <el-image :src="paypic"></el-image>
            </div>
            <div slot="footer">
                <el-button @click="payVisible = false">取 消</el-button>
                <el-button type="primary" @click="payfororder()">已支付</el-button>
            </div>
        </el-dialog>
    </div>
</template>

<script>
import { addOrderInfo } from '../../../api/index.js';
export default {
    name: 'orderroom',
    data() {
        return {
            currentDate: new Date(),
            roompic: [
                require('../image/timg1.jpg'),
                require('../image/timg1.jpg'),
                require('../image/timg3.jpg'),
                require('../image/timg4.jpg'),
                require('../image/timg4.jpg'),
                require('../image/timg4.jpg')
            ],
            psrc: [
                require('../image/timg1.jpg'),
                require('../image/timg2.jpg'),
                require('../image/timg3.jpg'),
                require('../image/timg4.jpg')
            ],
            description: ['单人标间', '双人标间', '豪华标间', '豪华双人间', '豪华三人间', '今日特惠'],
            singlePrice: [199, 299, 399, 499, 599, 159],
            orderVisible1: false,
            orderVisible2: false,
            orderVisible3: false,
            roomVisible: false,
            payTypeVisible: false,
            payVisible: false,
            activeName: [1],
            checkInTime: '',
            checkOutTime: '',
            useDay: '',
            roomNum: '',
            useNum: '',
            pickerOptions0: {
                disabledDate(time) {
                    return time.getTime() < Date.now() - 8.64e7;
                }
            },
            userName: '',
            userTel: '',
            checkTime: '',
            checoutkTime: '',
            roomType: '',
            orderId: '',
            totalPrice: '',
            item: '',
            imagesrc1: require('../image/alipay.jpg'),
            imagesrc2: require('../image/wechatpay.jpg'),
            imagesrc3: require('../image/yinlianpay.jpg'),
            paypic: require('../image/pay.jpg')
        };
    },
    methods: {
        checkorder(item) {
            console.log(item);
            this.item = item;
            console.log(this.useDay, this.checkInTime);
            if (this.checkInTime === '' || this.useDay === 0) {
                this.$alert('请先选择入住时间', {
                    confirmButtonText: '确定',
                    callback: action => {
                        this.$message({
                            type: 'warning',
                            message: `未选择入住时间`
                        });
                    }
                });
                this.orderVisible1 = true;
            } else {
                this.orderVisible1 = false;
                this.orderVisible2 = true;
            }
        },
        roomInfo(item) {
            this.item = item;
            this.roomVisible = true;
        },
        cancelorder1() {
            this.orderVisible1 = false;
        },
        cancelorder2() {
            this.$message({
                message: '订单已取消！',
                type: 'warning'
            });
            this.orderVisible1 = false;
            this.orderVisible2 = false;
            this.orderVisible3 = false;
        },
        formatZero(num, len) {
            if (String(num).length > len) return num;
            return (Array(len).join(0) + num).slice(-len);
        },
        getTimeString(time) {
            let y = time.getFullYear();
            let m = time.getMonth() + 1;
            let d = time.getDate();
            let h = time.getHours();
            let mm = time.getMinutes();
            return (
                y + '-' + this.formatZero(m, 2) + '-' + this.formatZero(d, 2) + ' ' + this.formatZero(h, 2) + ':' + this.formatZero(mm, 2)
            );
        },
        getCheckoutTimeString(time, day) {
            let y = time.getFullYear();
            let m = time.getMonth() + 1;
            var h = time.getHours();
            let d = 0;
            if (h < 12) {
                d = time.getDate() + day - 1;
            } else {
                d = time.getDate() + day;
            }
            let mm = time.getMinutes();
            return y + '-' + this.formatZero(m, 2) + '-' + this.formatZero(d, 2) + ' ' + 12 + ':00';
        },
        timeCommit() {
            this.orderVisible1 = false;
        },

        commit() {
            if (this.checkInTime === '' || this.useDay === 0) {
                this.orderVisible1 = false;
                this.$message({
                    message: '请选择入住时间和住房时长',
                    type: 'warning'
                });
            } else {
                this.orderVisible2 = true;
            }
            console.log(this.checkInTime, this.useDay);
        },
        getuuid() {
            var s = [];
            var hexDigits = '0123456789';
            for (var i = 0; i < 36; i++) {
                s[i] = hexDigits.substr(Math.floor(Math.random() * 0x10), 1);
            }
            s[14] = '4';
            s[19] = hexDigits.substr((s[19] & 0x3) | 0x8, 1);
            s[8] = s[13] = s[18] = s[23] = '';

            var uuid = s.join('').slice(0,12);
            return uuid;
        },
       
        payType() {
            this.payTypeVisible = true;
            this.orderVisible2 = false;
        },
        commitOrder() {
            if (this.useNum === 0 || this.roomNum === 0) {
                this.orderVisible2 = true;
                this.$message({
                    type: 'warning',
                    message: `请选择房间数量和入住人数！`
                });
            } else {
                const s = this.getuuid();
                console.log(typeof s);
                this.roomVisible = false;
                this.orderVisible2 = false;
                this.orderVisible3 = true;
                this.userName = this.$store.state.user.userName;
                this.userTel = this.$store.state.user.tel;
                this.checkTime = this.getTimeString(this.checkInTime);
                this.checoutkTime = this.getCheckoutTimeString(this.checkInTime, this.useDay);
                this.orderId = s;
                this.roomType = this.description[this.item - 1];
                this.totalPrice = this.singlePrice[this.item - 1] * this.useDay * this.roomNum;
            }
        },
        payorder() {
            this.payVisible = true;
            this.orderVisible = false;
            this.roomVisible = false;
            this.orderVisible2 = false;
            this.orderVisible3 = false;
        },
        async payfororder() {
            let curTime = this.getTimeString(this.checkInTime);
            console.log(curTime);
            this.$alert('订单支付成功', {
                confirmButtonText: '确定',
                callback: action => {
                    this.$message({
                        type: 'success',
                        message: `支付成功`
                    });
                }
            });
            let json = {
                roomId: 413,
                roomType: this.item,
                userName: this.userName,
                id: this.$store.state.user.id,
                checkInTime: this.getTimeString(this.checkInTime),
                checkOutTime: this.getCheckoutTimeString(this.checkInTime, this.useDay),
                time: this.getTimeString(new Date()),
                orderId: parseInt(this.orderId),
                total: this.totalPrice,
                roomNum:this.roomNum,
                customerNum:this.useNum,
            };
            console.log(json);
            await addOrderInfo(json).catch(() => {
                return 'error';
            });

            this.orderVisible = false;
            this.roomVisible = false;
            this.orderVisible1 = false;
            this.orderVisible2 = false;
            this.orderVisible3 = false;
            this.payVisible = false;
            this.payTypeVisible = false;
            this.useNum = '';
            this.item = '';
            this.useDay = '';
            this.roomNum = '';
            this.checkInTime = '';
            this.$router.push('account');
        }
    }
};
</script>

<style>
.bottom {
    margin-top: 13px;
    line-height: 12px;
}

.button {
    font-size: 15px;
    padding: 5px;
    margin: 0px;
}

.image {
    float: left;
    width: 20%;
    margin-right: 30px;
    margin-bottom: 0px;
}
/* .card {
    width: 200px;
    height: 200px;
    padding: 0px;
    margin: 20px;
} */

.clearfix:after {
    display: table;
    content: '';
}

.clearfix:after {
    clear: both;
}

.el-card {
    height: auto;
}
[v-cloak] {
    display: none;
}
.paybutton {
    width: 200px;
    height: 80px;
}
</style>